<template>
  <div
    v-for="c in classes"
    :key="c.id"
    style="
      background-color: white;
      padding: 24px;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: transform 0.2s ease;
      cursor: pointer;
    "
  >
    <!-- 科目标签 -->
    <div style="position: relative; margin-bottom: 16px">
      <div
        style="
          display: inline-block;
          padding: 2px 8px;
          background-color: #007bff;
          color: white;
          border-radius: 4px;
          font-size: 12px;
          font-weight: 500;
        "
      >
        科目{{ c.subjectId }}
      </div>
      <div style="position: absolute; right: 0; top: 0; font-size: 12px; color: #6c757d">★</div>
    </div>

    <!-- 课程信息 -->
    <h3 style="font-size: 16px; font-weight: 600; color: #333; margin-bottom: 8px">
      {{ c.courseName }}
    </h3>
    <p style="color: #6c757d; font-size: 14px; line-height: 1.5; margin-bottom: 16px">
      {{ c.content }}
    </p>

    <!-- 价格与教练 -->
    <div
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
      "
    >
      <!-- <div style="color: #007bff; font-size: 18px; font-weight: 700">¥1900</div>
              <div style="color: #adb5bd; text-decoration: line-through; font-size: 12px">
                原价 ¥2400
              </div> -->
    </div>

    <div style="display: flex; align-items: center; gap: 8px; font-size: 14px; color: #6c757d">
      <!-- <div
                style="
                  width: 32px;
                  height: 32px;
                  background-color: #e9ecef;
                  border-radius: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                {{ course.coach.charAt(0) }}
              </div> -->
      <span>{{ c.coach }}</span>
      <div style="margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 12px">
        <div
          style="
            width: 12px;
            height: 12px;
            background-color: #ffc107;
            clip-path: polygon(
              50% 0%,
              61% 35%,
              98% 35%,
              68% 57%,
              79% 91%,
              50% 70%,
              21% 91%,
              32% 57%,
              2% 35%,
              39% 35%
            );
          "
        ></div>
      </div>
    </div>

    <!-- 报名按钮 -->
    <button
      @click="handleEnroll(course.id)"
      style="
        width: 100%;
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 24px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        margin-top: 16px;
        box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
        transition: transform 0.2s ease;
      "
      onmouseover="this.style.transform='translateY(-1px)'"
      onmouseout="this.style.transform='translateY(0)'"
    >
      立即报名
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

import axios from 'axios'

const classes = ref([])

const fetchClasses = async () => {
  try {
    const response = await axios.get('http://localhost:8787/api/classes')
    classes.value = response.data
  } catch (error) {
    console.error('获取课程列表失败:', error)
  }
}
console.log('数据', classes)

onMounted(() => {
  fetchClasses()
})
</script>
